<template>
  <div>
    
    <!-- 值 -->
    <input
      type="text"
      class="weui-input"
      v-model="value"
      placeholder="可手动输入"
      style="width:70%;"
      v-on:input="$emit('input', $event.target.value)"
    />

    <!-- 按钮 -->
    <div
      class="weui-btn weui-btn_mini weui-btn_primary"
      @click="scan"
      v-if="permission=='w'||permission=='b'"
      :style="style"
    >
      <slot>扫描</slot>
    </div>

    <!-- 扫描窗口 -->
    <div>
      <popup v-model="show" height="100%">
        <x-header :left-options="{showBack: false}">扫码中</x-header>
        <div :style="divStyle" class="video-div">
          <div class="video-line" v-show="showLine"></div>
          <StreamBarcodeReader @decode="codeArrived" @loaded="onLoaded"></StreamBarcodeReader>
        </div>
        <x-button type="primary" @click.native="cancel">取消</x-button>
      </popup>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import adapter from "webrtc-adapter";
import { StreamBarcodeReader } from "vue-barcode-reader";

export default {
  components: {
    StreamBarcodeReader
  },
  props: {
    value: {
      required: true
    },
    permission: {
      default: "w"
    }
  },
  data: function() {
    return {
      show: false,
      showLine: false,
      videoHeight: 0,
      divStyle: {
        width: "100%",
        height: "85%",
        // "background-image": "url('" + require("@/assets/abScanCode1.png") + "')"
      },
      videoStyle: {
        width: "300px",
        height: "230px",
        position: "absolute",
        "margin-top": "10px",
        left: "2%"
      },
      style: {
        border: ""
      }
    };
  },
  mounted: function() {
    this.handleStyle();
  },
  created: function() {},
  destroyed() {},
  methods: {
    onLoaded(result) {
    },
    codeArrived: function(text) {
      console.info("扫描结果：" + text);
      if (text) {
        this.$emit("input", text);
        this.show = false;
        this.showLine = false;
      }
    },
    scan: function() {
      this.show = true;
    },
    cancel: function() {
      this.showLine = false;
      this.show = false;
    },
    handleStyle: function() {
      if (!this.$vnode.context.$validity) {
        this.$vnode.context.$validity = {};
      }

      if (this.permission == "b") {
        if (!this.value) {
          this.$vnode.context.$validity[this.$attrs.desc] = "必填";
          this.style["border"] = "1px solid red";
        } else {
          delete this.$vnode.context.$validity[this.$attrs.desc];
          this.style["border"] = "";
        }
      }
    }
  },
  watch: {
    value: function(newVal, oldVal) {
      this.handleStyle();
    }
  }
};
</script>
<style scoped>
.video-div {
  text-align: center;
  position: relative;
}
#video {
  width: 300px;
  height: 230px;
  margin-top: 30%;
}
.video-line {
  display: inline-block;
  color: white;
  z-index: 9999;
  height: 1px;
  background-color: #e9e9e9;
  margin-top: calc(30% + 115px);
  width: 298px;
  -webkit-animation: line 1.4s infinite;
  animation: line 1.2s infinite;
  position: absolute;
  margin-left: 1px;
}
@keyframes line {
  0% {
    transform: translateY(-113px);
  }

  50% {
    transform: translateY(113px);
  }

  100% {
    transform: translateY(-113px);
  }
}

@-webkit-keyframes line {
  0% {
    -webkit-transform: translateY(-90px);
  }

  50% {
    -webkit-transform: translateY(90px);
  }

  100% {
    -webkit-transform: translateY(-90px);
  }
}
</style>

